<template>
  <BasicDrawer :width="400" @register="registerDrawer" showFooter @ok="handleConfirm">
    <a-tree checkable :treeData="treeData" v-model:checkedKeys="checkedKeys" @check="handleCheck" />
  </BasicDrawer>
  <!-- <DictItemModal :baseDictId="baseDictId" :baseDictCode="baseDictCode" @register="registerModal" @success="reload" /> -->
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { message, Modal } from 'ant-design-vue';
  import { getRoleMenuTree, updateRoleMenuAuthority } from '/@/api/sys/role';
  import type { TreeProps } from 'ant-design-vue';

  let roleId = 0;
  const baseDictCode = ref<string>();

  const treeData = ref<TreeProps['treeData']>([]);
  const checkedKeys = ref([]);
  const halfCheckedKeys = ref([]);

  async function init() {
    const data = await getRoleMenuTree(roleId);
    treeData.value = data.frontTree;
    checkedKeys.value = data.chooseIds;
  }

  const [registerDrawer, { changeOkLoading }] = useDrawerInner((data) => {
    roleId = data.record.id;
    init();
  });

  const handleCheck = (_checkedKeys, info) => {
    halfCheckedKeys.value = info.halfCheckedKeys;
  };

  const handleConfirm = async () => {
    changeOkLoading(true);
    try {
      await updateRoleMenuAuthority({
        roleId,
        chooseIds: checkedKeys.value.concat(halfCheckedKeys.value),
      });
      message.success('系统权限修改成功');
    } finally {
      changeOkLoading(false);
    }
  };
</script>
